<template>
  <BorderBox10 class="w-full h-full">
<!--        <div class="grid grid-cols-3 p-4">
          <div class="col-span-2 h-full bg-white flex flex-col justify-around">
            <Title :title="title"></Title>
            <div class="">
              <p class="text-3xl font-medium pb-4 text-center text-[#00FFFF]"> {{data.total}} 人</p>
              <Decoration4 :reverse="true" style="width:18rem; height: 1rem;" />
            </div>
          </div>
          <div>456</div>
        </div>-->
    <div class="flex flex-row gap-3 p-6 h-full">
      <div class="flex flex-col justify-between h-4/5">
        <Title :title="title"></Title>
        <div class="">
          <p class="text-3xl font-medium pb-4 text-center text-[#00FFFF]"> {{ title==='申请总数'? data.total : data.incumbency }} 人</p>
          <Decoration4 :reverse="true" style="width:18rem; height: 1rem;"/>
        </div>
      </div>
        <Decoration9 style="width:14rem; height:14rem;">
          <p class="text-[#00FFFF] text-2xl">
            {{ title==='申请总数'? data.total : data.incumbency }}
          </p>
        </Decoration9>
    </div>
  </BorderBox10>
</template>

<script setup>
import {
  BorderBox1,
  BorderBox10,
  Decoration4,
  Decoration5,
  Decoration7,
  Decoration8,
  Decoration9,
} from '@kjgl77/datav-vue3'
import Title from '@/view/memberManager/components/title.vue'
import { defineProps } from 'vue'

const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  data: {
    type: Object,
    default: () => {
      return {}
    },
  },
})

</script>

<style scoped lang="scss">
.contents {
  font-size: 28px;
  text-shadow: 0 0 3px #7acaec;
}

.content {
  height: calc(100vh - 130px);

  .list {
    border-bottom: 1px solid #c2c2c2;
  }
}
</style>
